<template>
  <el-card>
    <template #header><h2>健康管家管理</h2></template>

    <el-form :inline="true" :model="filters" class="toolbar">
      <el-form-item label="管家姓名">
        <el-input
          v-model="filters.name"
          placeholder="输入管家姓名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchManagers">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="managers" stripe>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="realName" label="姓名" />
      <el-table-column prop="phoneNumber" label="手机号" />
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button
            size="small"
            type="primary"
            @click="configCustomers(row)"
          >配置客户</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page.current"
      :page-size="page.size"
      :total="page.total"
      @current-change="fetchManagers"
      background
      layout="prev, pager, next, jumper, ->, total"
      style="margin-top:16px; text-align:right;"
    />
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
import qs from 'qs'

const axios = inject('axios')
const router = useRouter()

// 搜索条件
const filters = reactive({ name: '' })
// 管家列表 & 分页
const managers = ref([])
const page = reactive({ current: 1, size: 10, total: 0 })

// 拉取所有 role=1（健康管家）用户，按名字模糊
async function fetchManagers() {
  const { data: resp } = await axios.post(
    '/UserController/queryUserByName',
    qs.stringify({
    role: 1,
    realName: filters.name,
    cur: page.current,
    number: page.size
  })
  )
  managers.value = resp.data
  page.total = resp.total
}

// 跳转到该管家配置客户页
function configCustomers(row) {
  router.push({
    path: '/SetServiceObject',
    query: {
      managerId: row.id,
      managerName: row.realName
    }
  })
}

onMounted(fetchManagers)
</script>

<style scoped>
.toolbar { margin-bottom:16px; }
</style>
